<!DOCTYPE html>
<html lang="ZH_cn">
<head>
  <meta charset="UTF-8">
  <title>JMeter脚本生成</title>
  <script src="./js/vue.js" type="text/javascript"></script>
  <script src="./js/art-template.js" type="text/javascript"></script>
  <script src="./js/axios.js" type="text/javascript"></script>
  <script src="./js/element-ui.js" type="text/javascript"></script>
  <script src="./js/api.js" type="text/javascript"></script>
  <link href="./css/element-ui.css" rel="stylesheet">
  <link>
  <style>
    body, html {
      padding: 0;
      margin: 0;
    }

    body {
      width: 100vw;
      height: 100vh;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    #app {
      width: 500px;
      display: grid;
      grid-row-gap: 10px;
    }

    #app > div {
      text-align: center;
    }

    #app > div > button {
      width: 350px;
      height: 60px;
    }
  </style>
</head>
<body>
<div id="app">
  <el-input v-model="serverUrl"></el-input>
  <div>
    <el-button type="primary" @click="generateJmxScript">生成脚本</el-button>
  </div>
  <div>
    <el-button type="primary" @click="generateTestCase">生成测试用例</el-button>
  </div>
  <div>
    <el-button type="primary" @click="generateInterface">生成接口设计</el-button>
  </div>
  <div>
    <el-button type="primary" @click="generateInterfaceDocInXxsj">生成接口文档（详细设计文档）</el-button>
  </div>
</div>
</body>
<script>
  new Vue({
    el: '#app',
    data() {
      return {
        serverUrl: '192.168.1.60:9090',
        strList: []
      }
    },
    methods: {
      async generateTestCase() {
        let filePath = await window.$api.generateTestCase({
          serverUrl: this.serverUrl,
        })
        this.downloadFile(filePath)
      },
      async generateInterface() {
        let filePath = await window.$api.generateInterface({
          serverUrl: this.serverUrl,
        })
        this.downloadFile(filePath)
      },

      async generateJmxScript() {
        this.strList = [];
        let data = await window.$api.generateJmxScript({
          serverUrl: this.serverUrl,
        })
        const render = template.compile(data.jmxTemplate);
        const forData = data.templateBeans
        for (let i = 0; i < forData.length; i++) {
          let data = forData[i];
          let jmxStr = render(data);
          this.strList.push({
            name: data.groupName,
            jmxStr: jmxStr
          })
        }
        this.generateJmxScriptFile()
      },
      async generateJmxScriptFile() {
        let filePath = await window.$api.generateJmxScriptFile({
          serverUrl: this.serverUrl,
          files: this.strList
        })
        this.downloadFile(filePath)
      },
      async generateInterfaceDocInXxsj() {
        let filePath = await window.$api.generateInterfaceDocInXxsj({
          serverUrl: this.serverUrl,
        })
        this.downloadFile(filePath)
      },

      downloadFile(filePath) {
        window.location.href = "/downloadFile?filePath=" + encodeURIComponent(filePath)
      }
    }
  })
</script>
</html>
